<extend name="./public/frame.html"/>
<block name="content">
    <style>
        .layui-form-label {
            width: 10%;
        }

        .layui-input-block {
            margin-left: 12%;
        }
    </style>
    <form class="layui-form layui-form-pane1" action="" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="添加标题，方便管理和查找" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传闪屏</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload_img">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item" id="img_url" style="display: none">
            <label class="layui-form-label"> </label>
            <div class="layui-input-block">
                <a href="" target="_blank" id="img_app">
                    <img src="" alt="" style="width: 100px;height: 180px">
                </a>
                <input type="hidden" name="img_url" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">App系统</label>
            <div class="layui-input-block">
                <input type="checkbox" value="1" name="system_type[]" title="小马出行安卓端">
                <input type="checkbox" value="2" name="system_type[]" title="小马出行IOS端">
                <input type="checkbox" value="3" name="system_type[]" title="小马出行司机安卓端">
                <input type="checkbox" value="4" name="system_type[]" title="小马出行司机IOS端">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示日期</label>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 240px;">
                    <input type="text" name="start_time" lay-verify="required|start_time" placeholder="开始时间 yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input" id="start_time">
                </div>
            </div><div class="layui-inline">~</div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 240px;">
                    <input type="text" name="end_time" lay-verify="required|end_time" placeholder="结束时间 yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input" id="end_time">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">显示时长</label>
            <div class="layui-input-block">
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="display_time" id="display_time" lay-verify="required|number" placeholder="显示时长" style="width: 80px;" autocomplete="off" onkeyup="parseInt(value=value.replace(/[^\d]+/g,''))">
                </div>
                <div class="layui-inline">秒</div>
            </div>
        </div>

        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">显示城市</label>-->
            <!--<div class="layui-input-block">-->
                <!--<input type="radio" name="is_top" value="0" title="全国" checked>-->
                <!--<input type="radio" name="is_top" value="1" title="特定省市">-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">显示城市</label>
            <div class="layui-input-block" style="width: 120px;">
                <select name="cs_type" class="select class-select" lay-filter="cs_type" id="cs_type">
                    <option value="0">全国</option>
                    <option value="1">特定省市</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item inputModel">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="width: 800px;">
                <table class="layui-table" style="width: 900px">
                    <tr class="province01" style="display: none;">
                        <td style="width: 100px">省级区域</td>
                        <td>
                            <input type="checkbox" value="all" title="全部" class="province_all pro"
                                   lay-filter="province">
                            <volist name="provinces" id="province">
                                <input type="checkbox" name="region[2][]" title="{$province}" value="{$key}"
                                       class="lay-input province_child province pro" lay-filter="province">
                            </volist>
                        </td>
                    </tr>
                    <tr class="city01" style="display: none">
                        <td>市级区域</td>
                        <td>
                            <ul id="city">
                                <volist name="edit_provinces" id="edit_pro">
                                    <php>$pid = $key; $class = 'city_'.$pid;</php>
                                    <li class="{$class} region_li">
                                        <input type="checkbox" value="all" data-pid="{$pid}" title="{$edit_pro}"
                                               class="lay-input city_all_{$pid}" {$city_all[$pid]?'checked':''}>
                                        <volist name="$edit_citys[$pid]" id="city">
                                            <input type="checkbox" name="region[3][{$pid}][]" data-pid="{$pid}"
                                                   title="{$city}" value="{$key}"
                                                   class="lay-input city_child_{$pid} city"
                                            <if condition="in_array($key,$info['region'][3][$pid])">checked</if>
                                            >
                                        </volist>
                                    </li>
                                </volist>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">点击效果</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="click_result" name="click_result" value="0" title="打开应用" checked>
                <input type="radio" lay-filter="click_result" name="click_result" value="1" title="打开指定页面">
                <div class="layui-inline">
                    <input type="text" name="appoint_page" id="appoint_page" class="layui-input layui-inline" placeholder="请输入页面参数" style="margin-left: 2px;">
                </div>
                <input type="radio" lay-filter="click_result" name="click_result" value="2" title="打开链接">
                <div class="layui-inline" style="width:280px;">
                    <input type="text" name="appoint_url" id="appoint_url" class="layui-input layui-inline" placeholder="请填写https://或http://开头的URL地址">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['laydate', 'upload', 'form', 'laydate'], function () {
            var laydate = layui.laydate
                , upload = layui.upload
                , form = layui.form;
            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_img' //绑定元素
                , url: '{:url("upload")}' //上传接口
                , done: function (res) {
                    if (res.status == 1) {
                        $("#img_url").find('img').attr('src', res.data.file);
                        $("#img_url").find('input').val(res.data.file);
                        $("#img_url").show();
                        $("#img_app").attr('href',res.data.file);
                        form.render();
                    }
                }
                , error: function (res1) {
                    console.log(res1);
                    //请求异常回调
                }
            });

            laydate.render({
                elem: '#start_time'
                , type: 'datetime'
                , theme: '#393D49'
                , trigger: 'click'
            });

            laydate.render({
                elem: '#end_time'
                , type: 'datetime'
                , theme: '#393D49'
                , trigger: 'click'
            });

            level = 3, pro_tmp = [], cit_tmp = [], cou_tmp = [];

            form.on('select(cs_type)', function (data) {
                console.log(data)
                if (data.value == 1) {
                    $('.province01').show();
                    $('.city01').show();
                } else {
                    $('.province01').css('display', 'none');
                    $('.city01').css('display', 'none');
                }
            });

            form.on('checkbox(province)', function (data) {
                $('.city01').show();
                var elem = data.elem, value = data.value, check = elem.checked, all = $('.province_all'),
                    item = $('.province_child'), index = 0, flag = false, pro = [];
                console.log(check)
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = pro_tmp.indexOf($(this).val());
                            if (ind == -1) {
                                pro.push($(this).val());
                                pro_tmp.push($(this).val());
                            }
                        });
                        if (!check) {
                            pro = [];
                            pro_tmp = [];
                            $('#city').html('');
                            $('#county').html('');
                            $('#city_').hide();
                            $('#county_').hide();
                        }
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        all.prop({'checked': flag});
                        if (!check) {
                            var ind = pro_tmp.indexOf(value);
                            if (ind > -1) {
                                pro_tmp.splice(ind, 1);
                            }
                            console.log(value)
                            $('._' + value).remove();
                            if ($('#city').children('li').length == 0) {
                                $('#city_').hide();
                            }
                            if ($('#county').children('li').length == 0) {
                                $('#county_').hide();
                            }
                        } else {
                            pro = [];
                            pro.push(value);
                            pro_tmp.push(value);
                        }
                        break;
                }
                form.render('checkbox');
                if (pro.length > 0 && level > 2) {
                    ajax(form, layer, pro, 2, 'city');
                }
            });
            form.on('checkbox(city)', function (data) {
                var elem = data.elem, value = data.value, check = elem.checked,
                    all = $('.city_all_' + $(elem).data('pid')),
                    item = $('._child_' + $(elem).data('pid')), index = 0, flag = false, cit = [];
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = cit_tmp.indexOf($(this).val());
                            if (ind == -1) {
                                cit.push($(this).val());
                                cit_tmp.push($(this).val());
                            }
                        });
                        if (!check) {
                            cit = [];
                            cit_tmp = [];
                            $('#county').html('');
                            $('#county_').hide();
                        }
                        form.render('checkbox');
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        if (!check) {
                            var ind = cit_tmp.indexOf(value);
                            if (ind > -1) {
                                cit_tmp.splice(ind, 1);
                            }

                        } else {
                            cit = [];
                            cit.push(value);
                            cit_tmp.push(value);
                        }
                        all.prop({'checked': flag});
                        form.render('checkbox');
                }
            });

            form.on('radio(click_result)', function () {
                if(this.value == '0') {
                    $("#appoint_page").val('');
                    $("#appoint_url").val('');
                } else if(this.value == '1') {
                    $("#appoint_url").val('');
                } else if(this.value == '2') {
                    $("#appoint_page").val('');
                }
            });

            form.on('submit(add)', function () {
                //添加时间比较
                var start_time = $("#start_time").val();
                var end_time = $("#end_time").val();
                var system_type = $("input[name='system_type[]']:checked").val();
                var img_url = $("input[name='img_url']").val();
                var cs_type = $("#cs_type").val();
                var pro_sel = $("input[name='region[2][]']:checked").val();

                if (start_time > end_time) {
                    layer.msg('显示开始时间不能大于结束时间', {icon: 5});
                    return false
                }
                if(!system_type) {
                    layer.msg('APP系统类型不能为空', {icon: 5});
                    return false
                }
                if(img_url == '') {
                    layer.msg('上传图片不能为空', {icon: 5});
                    return false
                }
                if(cs_type == 1) {
                    if(!pro_sel) {
                        layer.msg('省级不能为空', {icon: 5});
                        return false
                    }
                }
            });
        });



        function ajax(form, layer, pid, level, id) {
            $.post('{$url}', {pid: pid.join(','), level: level}, function (res) {
                switch (res['status']) {
                    case 1:
                        $('#' + id).append(res['html']);
                        form.render('checkbox');
                        $('#' + id + '_').show();
                        break;
                    default:
                        layer.alert(res['msg'], {icon: 5});
                        break;
                }
            }, 'json')
        }
    </script>
</block>
